<template>
  <div>
    <el-dialog
      title="查看"
      width="1270px"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="dialogBody">
        <div class="userInfo">
          <div class="photo">
            <img v-if="info.avatar" :src="$resDomain + info.avatar" alt="" />
            <img
              v-else
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              alt=""
            />
          </div>

          <div class="desc">
            <el-descriptions title="发布人信息" :column="2" size="middle">
              <el-descriptions-item label="真实姓名">{{
                info.userName
              }}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{
                info.mobile
              }}</el-descriptions-item>
              <el-descriptions-item label="发布时间">{{
                info.fbDate
              }}</el-descriptions-item>
              <el-descriptions-item label="房屋">
                {{ info.tenement }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
        <div class="lnliContent">
          <div class="lineTitle">
            <div class="line"></div>
            <span v-if="typeName == '闲置'">物品金额：{{ info.price }}元</span>
            <span v-else-if="typeName == '租房'">房屋描述</span>
            <span v-else-if="typeName == '攒局'"
              >攒局标题：{{ info.title }}</span
            >
            <span v-else-if="typeName == '投票'">投票主题</span>
            <span v-else>动态内容</span>
          </div>
          <div class="">
            <div class="xzdesc" v-if="typeName == '闲置'">
              <div style="margin-bottom: 10px">
                <span>物品标题：</span>{{ info.title }}
              </div>
              <div>
                <span>物品描述：</span>
                {{ info.dynamic }}
              </div>
            </div>
            <div class="cjdesc" v-else-if="typeName == '攒局'">
              <div class="cjdesc_item">
                <div class="lableCell">
                  <span>攒局人数：</span>
                  {{ info.people_number }}
                </div>
                <div class="lableCell">
                  <span>地点：</span>
                  {{ info.address }}
                </div>
              </div>
              <div class="cjdesc_item">
                <div class="lableCell">
                  <span>其他描述：</span>
                  {{ info.dynamic }}
                </div>
                <div class="lableCell">
                  <span>活动起止时间：</span>
                  {{ info.s_date }} ~ {{ info.e_date }}
                </div>
              </div>
            </div>
            <div class="tpdesc" v-else-if="typeName == '投票'">
              <div style="margin-bottom: 10px">
                {{ info.title }}
              </div>
              <div class="voteBox">
                <div v-for="(item, index) in info.dynamic" :key="index">
                  {{ item }}（{{ info.dynamic_count[index] }}）
                </div>
              </div>
              <div style="margin-top: 10px">
                投票截止时间：{{
                  $moment.unix(info.end_at).format("YYYY-MM-DD HH:mm:ss")
                }}
              </div>
            </div>
            <div class="desc" v-else>
              {{ info.dynamic }}
            </div>
            <div class="imgList">
              <el-image
                v-for="(item, index) in info.picture"
                :key="index"
                :src="$resDomain + item"
                :preview-src-list="[$resDomain + item]"
                fit="cover"
              >
              </el-image>
              <!-- <img
                v-for="(item, index) in info.picture"
                :key="index"
                :src="$resDomain + item"
                alt=""
              /> -->
            </div>
            <video
              class="Dtvideo"
              v-if="info.video_url"
              controls
              :src="info.video_url"
            ></video>
          </div>
        </div>
        <div class="tableList">
          <div class="tabsBox" v-if="typeName != '投票'">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane
                v-for="(item, index) in tabList"
                :key="index"
                :label="item.label"
                :name="item.name"
                lazy
              ></el-tab-pane>
              <!-- <el-tab-pane label="已报名(25)" name="1"></el-tab-pane>
                    <el-tab-pane label="活动评论(5)" name="2"></el-tab-pane> -->
            </el-tabs>
          </div>
          <div class="tablesCard bgfff">
            <!-- <div class="tablesCardTop"></div> -->
            <el-table
              :data="tableData"
              border
              size="small"
              height="580"
              style="width: 100%"
            >
              <el-table-column
                :prop="item.prop"
                :label="item.label"
                align="center"
                :width="item.width"
                v-for="(item, index) in tableColumns[tableColumnIndex]"
                :key="index"
              />

              <el-table-column
                v-if="delShow"
                prop=""
                label="操作"
                align="center"
                width="80"
              >
                <template slot-scope="scope">
                  <div class="">
                    <el-popover
                      :ref="`del-${scope.row.id}`"
                      popper-class="myPopover"
                      placement="left"
                      width="160"
                      trigger="click"
                    >
                      <p class="text">
                        <i class="el-icon el-icon-warning"></i>
                        是否确认删除？
                      </p>
                      <div class="btnBox">
                        <el-button
                          size="mini"
                          @click="$refs[`del-${scope.row.id}`].doClose()"
                          >取消</el-button
                        >
                        <el-button
                          type="primary"
                          size="mini"
                          @click="onBtns(scope.row)"
                          >确定</el-button
                        >
                      </div>
                      <el-link type="danger" slot="reference"
                        >删除</el-link
                      ></el-popover
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <!-- <div class="pageBlock">
              <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :current-page.sync="form.page"
                :page-size="form.limit"
                @size-change="
                  (e) => {
                    form.limit = e;
                    getList();
                  }
                "
                @current-change="
                  (e) => {
                    form.page = e;
                    getList();
                  }
                "
              >
              </el-pagination>
            </div> -->
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { linliDetails, delComment } from "@/api/linli";
export default {
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: true
    },
    typeName: {
      type: String,
      default: ""
    },
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeName: "1",

      tabList: [
        {
          label: "点赞(0)",
          name: "1"
        },
        {
          label: "评论(0)",
          name: "2"
        },
        {
          label: "收藏(0)",
          name: "3"
        }
      ],
      form: {
        page: 1,
        limit: 10
      },
      total: 0,
      tableData: [],
      tableColumns: [
        [
          {
            label: "操作时间",
            prop: "create_at",
            width: ""
          },
          // {
          //   label: "用户昵称",
          //   prop: "nickName",
          //   width: "",
          // },
          {
            label: "姓名",
            prop: "userName",
            width: ""
          },
          {
            label: "联系电话",
            prop: "mobile",
            width: ""
          }
        ],
        [
          {
            label: "操作时间",
            prop: "create_at",
            width: ""
          },
          // {
          //   label: "用户昵称",
          //   prop: "nickName",
          //   width: "",
          // },
          {
            label: "姓名",
            prop: "userName",
            width: ""
          },
          {
            label: "联系电话",
            prop: "mobile",
            width: ""
          },
          {
            label: "评论内容",
            prop: "content",
            width: ""
          }
        ],
        [
          {
            label: "操作时间",
            prop: "create_at",
            width: ""
          },
          // {
          //   label: "用户昵称",
          //   prop: "nickName",
          //   width: "",
          // },
          {
            label: "姓名",
            prop: "userName",
            width: ""
          },
          {
            label: "联系电话",
            prop: "mobile",
            width: ""
          },
          {
            label: "投票内容",
            prop: "vote_txt",
            width: "500"
          }
        ]
      ],
      tableColumnIndex: 0,
      delShow: false,
      info: {},
      curLabel: ""
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {
    if (this.typeName == "闲置") {
      this.tabList = [
        {
          label: "想要人数(0)",
          name: "1"
        }
      ];
    } else if (this.typeName == "攒局") {
      this.tabList = [
        {
          label: "已报名(0)",
          name: "1"
        },
        {
          label: "评论(0)",
          name: "2"
        }
      ];
    }
    console.log("this.typeName", this.typeName);
    this.tableColumnIndex = 0;
    this.getInfo();
  },

  methods: {
    getInfo() {
      linliDetails({
        id: this.id
      }).then((res) => {
        console.log(res.data, this.typeName, ">>>>>>>>DATA---");
        this.info = res.data;
        this.tableData = this.info.dzData;

        if (this.typeName == "闲置") {
          this.tabList = [
            {
              label: `想要人数(${this.info.xyData.length})`,
              name: "1"
            }
          ];
          this.tableData = this.info.xyData;
        } else if (this.typeName == "攒局") {
          this.tabList = [
            {
              label: `已报名(${this.info.bmData.length})`,
              name: "1"
            },
            {
              label: `评论(${this.info.plData.length})`,
              name: "2"
            }
          ];
          this.tableData = this.info.bmData;
        } else if (this.typeName == "投票") {
          this.tableColumnIndex = 2;
          this.tabList = [];
          this.tableData = this.info.tpData;
        } else {
          this.tabList = [
            {
              label: `点赞(${this.info.dzData.length})`,
              name: "1"
            },
            {
              label: `评论(${this.info.plData.length})`,
              name: "2"
            },
            {
              label: `收藏(${this.info.scData.length})`,
              name: "3"
            }
          ];
        }
        //判断展示的内容
        if (this.curLabel.indexOf("点赞") != -1) {
          this.tableData = this.info.dzData;
        } else if (this.curLabel.indexOf("评论") != -1) {
          this.tableData = this.info.plData;
        } else if (this.curLabel.indexOf("收藏") != -1) {
          this.tableData = this.info.scData;
        } else if (this.curLabel.indexOf("已报名") != -1) {
          this.tableData = this.info.bmData;
        } else if (this.curLabel.indexOf("想要人数") != -1) {
          this.tableData = this.info.xyData;
        }
        console.log("6666===>>", this.tableData, this.tableColumnIndex);
      });
    },
    handleClick(val) {
      // console.log(val, ">>>");
      this.delShow = false;
      this.tableColumnIndex = 0;
      this.curLabel = val.label;
      if (val.label.indexOf("点赞") != -1) {
        this.tableData = this.info.dzData;
      } else if (val.label.indexOf("评论") != -1) {
        this.tableData = this.info.plData;
      } else if (val.label.indexOf("收藏") != -1) {
        this.tableData = this.info.scData;
      } else if (val.label.indexOf("已报名") != -1) {
        this.tableData = this.info.bmData;
      } else if (val.label.indexOf("想要人数") != -1) {
        this.tableData = this.info.xyData;
      }
      if (val.label.indexOf("评论") != -1) {
        this.delShow = true;
        this.tableColumnIndex = 1;
      }
      // console.log(this.tableData, this.tableColumnIndex);
    },
    onBtns(info) {
      this.$refs[`del-${info.id}`].doClose();
      delComment({ id: info.id }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.msg
          });
          this.tableColumnIndex = 1;
          this.getInfo();
          // this.tableData = this.info.plData;
          // console.log(this.tableData, "888888infoinfo");
        }
      });
    },
    handleClose() {
      this.$emit("handleClose", 1);
    }
  },

  watch: {}
};
</script>
<style lang="scss" scoped>
.dialogBody {
  .userInfo {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    .photo {
      margin-right: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #dff0ff;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      img {
        width: 108px;
        height: 108px;
        border-radius: 50%;
        border: 4px solid #dff0ff;
        object-fit: cover;
      }
    }
  }
  .lnliContent {
    .lineTitle {
      margin-bottom: 10px;
    }
    .imgList {
      margin-top: 20px;
      // img {
      //   width: 116px;
      //   height: 116px;
      //   margin-right: 14px;
      //   object-fit: contain;
      // }
      .el-image {
        width: 116px;
        height: 116px;
        margin-right: 14px;
      }
    }
    .Dtvideo {
      width: 160px;
      height: 140px;
    }
    .desc {
    }
    .cjdesc {
      .cjdesc_item {
        display: flex;
        justify-content: space-between;
        .lableCell {
          margin-bottom: 10px;
          display: flex;
          width: 49%;
          span {
            display: inline-block;
            flex-shrink: 0;
            // width: 100px;
            // text-align: right;
          }
        }
      }
    }
    .voteBox {
      > div {
        margin-bottom: 10px;
        padding-left: 20px;
        height: 36px;
        line-height: 36px;
        background: rgba(0, 135, 250, 0.05);
      }
      div:last-child {
        margin-bottom: 0;
      }
    }
  }
  .tableList {
    margin-top: 20px;
    padding-top: 10px;
    border: 1px solid #e5e5e5;
    .el-tabs {
      height: 20px;
    }
    .tabsBox {
      margin: 0 24px;
    }
  }
}
</style>
